<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">
<ui:composition template="../template/layout.xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets">
	<ui:param name="pageHeaderTitle" value="User list" />
	<ui:param name="pageTitle" value="User list" />
	<ui:define name="content">
		<div id="inner_content_high">
		<h:form id="searchForm">
			<h:panelGrid columns="2" cellpadding="8" style="width: 520px">			
				<h:panelGroup>
					<p:outputLabel value="Filter by username: " for="searchString" />
					<br />					
					<p:inputText id="searchString" title="searchString" value="#{viewUserListBean.searchString}" maxlength="30">
						<p:ajax event="keyup" listener="#{viewUserListBean.getUserList}" process="@this" update=":searchForm:searchGroup :resultGroup"></p:ajax>
					</p:inputText>												
				</h:panelGroup>		
				<h:panelGroup id="searchGroup">
				<br/>
					<p:message for="searchString"/>
				</h:panelGroup>														
			</h:panelGrid>								
		</h:form>
		<h:form style="padding-left: 10px">
			<p:outputLabel value="Filter by role: " for="selectRole" />
			<br />								
			<p:selectOneMenu id="selectRole" panelStyle="width:150px"
							style="width:160px" value="#{viewUserListBean.selectedRole}">				
				<f:selectItems value="#{viewUserListBean.roleList}" />
				<p:ajax event="change" listener="#{viewUserListBean.getUserList}" update=":resultGroup" />
			</p:selectOneMenu>																											
		</h:form>
			<br />			
			<br />			
			<h:panelGroup id="resultGroup" >
				<p:dataTable id="viewUserListResultTable" style="width: 600px; padding-left: 10px" var="user" value="#{viewUserListBean.resultList}" paginator="true" rows="10" paginatorAlwaysVisible="false" 
		                paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink}" paginatorPosition="bottom" pageLinks="5" selectionMode="single" rowKey="#{user.id}">
		            <p:ajax event="rowSelect" listener="#{viewUserListBean.onRowSelect}" />
					<p:column headerText="Username">
						<h:outputText value="#{user.name}" />
					</p:column>
					<p:column headerText="Roles">
        				<ui:repeat var="role" value="#{user.roles}" varStatus="loop">
             			<h:outputText value="#{role.name}#{!loop.last ? ', ' : ''} " />
        				</ui:repeat>
    				</p:column>
				</p:dataTable>
			</h:panelGroup>	
		</div>	
		<br />
		<div id="menu_info">
			<p:messages />
		</div>	
	</ui:define>
</ui:composition>
</html>